﻿<Page x:Class="WpfAnimation.PageSplineAnimation"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="880"
	Title="PageSplineAnimation">
    <Canvas>
        <TextBlock Height="30" HorizontalAlignment="Left" Canvas.Left="10" Canvas.Top="10"
                   Background="LightCyan"  Name="textBlock1" Text="Normal" VerticalAlignment="Top" Width="150" />
        <TextBlock Height="30" HorizontalAlignment="Left" Canvas.Left="200" Canvas.Top="10"
                   Background="LightCyan"  Name="textBlock2" Text="Spline 1,0 0,1" VerticalAlignment="Top" Width="150" />
        <TextBlock Height="30" HorizontalAlignment="Left" Canvas.Left="400" Canvas.Top="10"
                   Background="LightCyan"  Name="textBlock3" Text="Spline 0,1 1,0" VerticalAlignment="Top" Width="150" />
        <TextBlock Height="30" HorizontalAlignment="Left" Canvas.Left="600" Canvas.Top="10"
                   Background="LightCyan"  Name="textBlock4" Text="Spline 0,0 1,0" VerticalAlignment="Top" Width="150" />
        <Path Canvas.Left="200" Canvas.Top="10" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <PathGeometry>
                    <PathFigure>
                        <BezierSegment Point1="150,0" Point2="0,170" Point3="150,170" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

        <Path Canvas.Left="400" Canvas.Top="10" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <PathGeometry>
                    <PathFigure>
                        <BezierSegment Point1="0,170" Point2="150,0" Point3="150,170" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Canvas.Left="600" Canvas.Top="10" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <PathGeometry>
                    <PathFigure>
                        <BezierSegment Point1="0,0" Point2="150,0" Point3="150,170" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        
        <Button Canvas.Left="12" Canvas.Top="197" Content="Test" Height="23" Name="button1" Width="75" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames    Storyboard.TargetName="textBlock2" Storyboard.TargetProperty="(Canvas.Top)" >
                                <SplineDoubleKeyFrame Value="10" KeyTime="00:00:0"   />
                                <SplineDoubleKeyFrame Value="150" KeyTime="00:00:5"    KeySpline="1,0 0,1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimation    From="10"  To="150" Duration="00:00:5" Storyboard.TargetName="textBlock1" Storyboard.TargetProperty="(Canvas.Top)" >
                            </DoubleAnimation>
                            <DoubleAnimationUsingKeyFrames   Storyboard.TargetName="textBlock3" Storyboard.TargetProperty="(Canvas.Top)" >
                                <SplineDoubleKeyFrame Value="10" KeyTime="00:00:0"   />
                                <SplineDoubleKeyFrame Value="150" KeyTime="00:00:5"    KeySpline="0,1 1,0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames   Storyboard.TargetName="textBlock4" Storyboard.TargetProperty="(Canvas.Top)" >
                                <SplineDoubleKeyFrame Value="10" KeyTime="00:00:0"   />
                                <SplineDoubleKeyFrame Value="150" KeyTime="00:00:5"    KeySpline="0,0 1,0"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Rectangle Canvas.Top="180" Width="800" Height="1" Fill="Red" />
        
        <TextBlock xml:space="preserve" Canvas.Top="226" Width="800" TextWrapping="Wrap" Canvas.Left="12">
            若要了解 KeySpline 的工作原理，首先需要了解三次方贝塞尔曲线。 一条三次方贝塞尔曲线由一个起点、一个终点和两个控制点来定义。KeySpline 中的两个坐标定义了这两个控制点。 在描述关键样条时，贝塞尔曲线的起点始终为 0，终点始终为 1，这也就是只定义两个控制点的原因。得到的曲线指定了如何在一个时间段内内插动画；也就是说，该曲线表示动画的目标属性在该时间段内的变化速度。为了更好地了解动画进度与贝塞尔曲线之间的关系，请参见 Key Spline Animation Sample（关键样条动画示例）。

        </TextBlock>
    </Canvas>
</Page>
